import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getArtistAlbumAction } from "../../../store/actionTypes";
import { NavLink } from "react-router-dom";
import Pagination from "../../../../../components/pagination";
import { getSizeImage, getYearMonthDay } from "@/utils/format-utils";

export default memo(function ArtistAlbumsInfo(props) {
  const dispatch = useDispatch();
  const [pageState, setPageState] = useState(1);

  useEffect(() => {
    dispatch(getArtistAlbumAction(props.id, 12, (pageState - 1) * 12));
  }, [dispatch, props.id, pageState]);

  const { artistAlbums } = useSelector(
    (state) => ({
      artistAlbums: state.getIn(["artistPage", "artistAlbums"]),
    }),
    shallowEqual
  );

  const getPage = (page) => {
    setPageState(page);
  };

  const artistAlbumsInfo = artistAlbums.code !== undefined && artistAlbums;

  return (
    <div className="artist-album">
      {artistAlbumsInfo ? (
        artistAlbumsInfo.hotAlbums.length !== 0 ? (
          artistAlbumsInfo.hotAlbums.slice(0, 12).map((item, index) => {
            return (
              <div key={item.id} className="artist-album-img-box">
                <div className="artist-album-img">
                  <img src={getSizeImage(item.picUrl, 120)} alt="" />
                  <NavLink
                    to={{ pathname: "/album", search: "?id=" + item.id }}
                    className="msk coverall"
                  ></NavLink>
                </div>
                <NavLink
                  to={{ pathname: "/album", search: "?id=" + item.id }}
                  className="artist-album-name"
                >
                  {item.name}
                </NavLink>
                <p className="artist-album-publish">
                  {getYearMonthDay(item.publishTime)}
                </p>
              </div>
            );
          })
        ) : (
          <div className="n-nmusic">
            <h3 className="n-music-h3">
              <i className="u-music-h3-i"></i>
              暂无专辑!
            </h3>
          </div>
        )
      ) : (
        ""
      )}
      {artistAlbumsInfo ? (
        artistAlbumsInfo.artist.albumSize > 12 ? (
          <Pagination
            size={12}
            page={pageState}
            getPage={getPage}
            total={artistAlbumsInfo ? artistAlbumsInfo.artist.albumSize : ""}
          />
        ) : (
          ""
        )
      ) : (
        ""
      )}
    </div>
  );
});
